<!-- start page title -->
<div class="row">
    <div class="col-sm-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="/myhome.html">首页</a></li>
                    <li class="breadcrumb-item active">收藏管理</li>
                </ol>
            </div>
            <h4 class="page-title">收藏的资源管理</h4>
        </div>
    </div>
</div>
<!-- end page title -->

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body">
                <div class="row mb-2">
                    <div class="col-sm-4">
                        <button type="button" class="btn btn-danger waves-effect waves-light" id="addFavoriteBtn">
                            <i class="mdi mdi-plus-circle mr-1"></i> 添加
                        </button>
                    </div>
                </div>

                <table id="favoriteTable" lay-filter="favorite-table"></table>

            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col -->
</div>
<!-- end row -->


<script type="text/html" id="optColTool">
    <a type="button" class="btn btn-xs btn-warning waves-effect waves-light" lay-event="modify">修改</a>
    <a type="button" class="btn btn-xs btn-danger waves-effect waves-light" lay-event="delete">删除</a>
</script>
<script>
    layui.config({
        base: '/assets/module/js/'
    }).use(['admin', 'table', 'layer'], function () {
        let table = layui.table;
        let layer = layui.layer;
        let admin = layui.admin;

        table.render({
            elem: '#favoriteTable',
            url: admin.config.favorite.backend_url + '/list', //数据接口
            page: true, //开启分页
            limits: [10, 15, 20, 30],
            cols: [[ //表头
                {type: 'numbers', title: '序号', width: 50},
                {field: 'name', title: '资源名称'},
                {field: 'url', title: 'URL'},
                {field: 'catalogName', title: '所属类别', align: 'center', width: 150},
                {field: 'description', title: '描述'},
                {title: '操作', width: 140, align: 'center', toolbar: '#optColTool'},
            ]],
            done: function (res, curr, count) {
                // console.log(res);
            }
        });

        //工具条事件
        table.on('tool(favorite-table)', function (o) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = o.data; //获得当前行数据
            let layEvent = o.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = o.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'delete') { // 删除
                layer.confirm('真的删除该行么？', {anim: 6, icon: 5, title: '警告'}, function (index) {

                    layer.close(index);
                    // 向服务端发送删除指令
                    admin.gajax(admin.config.favorite.backend_url + '/' + data.id, {}, 'DELETE', function (r) {
                        if (r.code === 0) {
                            layer.msg('操作成功', {icon: 1});
                            // table.reload('favoriteTable');
                            o.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                        } else {
                            layer.msg(r.message, {icon: 2});
                        }
                    });
                });
            } else if (layEvent === 'modify') { // 修改动作
                showModal(layEvent, data);

                // 同步更新缓存对应的值
                // o.update({
                //     username: '123'
                //     ,title: 'xxx'
                // });
            }
        });

        $('#addFavoriteBtn').click(function () {
            showModal('add');
        });

        function showModal(event, data) {
            let title = ''
            if (event === 'add') {
                title = "添加资源";
            } else if (event === 'modify') {
                title = "修改资源"
            } else {
                console.log("不支持的事件！");
                return;
            }
            admin.showModal(event, title, '/pages/favorite_form.html', data, function () {
                table.reload('favoriteTable');
            });
        }
    });
</script>